<template>
  <div>
    <el-button type="primary" color="#7c55e6">按钮</el-button>

    <div>
      <el-form ref="formRef" style="max-width: 600px" :model="numberValidateForm" label-width="auto"
        class="demo-ruleForm">
        <el-form-item label="age" prop="age" :rules="[
          { required: true, message: 'age is required' },
          { type: 'number', message: 'age must be a number' },
        ]">
          <el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
          <el-button @click="resetForm(formRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-input v-model="input" style="width: 240px" placeholder="Please input" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const formRef = ref()

const input = ref('')

const numberValidateForm = reactive({
  age: '',
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped>
/* .el-button {
  background-color: greenyellow;
} */
</style>